<script lang="jsx" setup>
import { inject, provide, ref } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { REQU, toFormData, useResp } from '@/net/requ.js';
import OrgModal from './components/org-modal.vue';
import { orgTypeOptions } from '@/util/const.js';
import { optsToDic } from '@/util/index.js';

const auth = inject('auth');

const loading = ref(false);
const columns = ref([
  {
    ellipsis: true,
    width: 200,
    title: '机构名称',
    dataIndex: 'name',
  },
  {
    width: 120,
    title: '联系方式',
    dataIndex: 'contact',
  },
  {
    width: 90,
    title: '机构类型',
    dataIndex: 'type',
    customRender: ({ text }) => R.prop(text, optsToDic(orgTypeOptions)),
  },
  {
    width: 150,
    title: '所属区划',
    dataIndex: 'area_id_path',
    customRender: () => '--',
  },
  {
    fixed: 'right',
    width: 70,
    title: '操作',
    customRender: ({ record }) => (
      <div class="op-btns icon">
        <Button
          type="link"
          onClick={() => useOrgModal(record)}>
          {{
            icon: () => <EditOutlined />,
            default: () => '编辑',
          }}
        </Button>
        <Button
          type="link"
          style="color: rgb(200,0,0);"
          onClick={() => Modal.confirm({
            content: '确定删除此机构？',
            okText: '确定',
            onOk: () => delOrg(record.id.toString()),
          })}>
          {{
            icon: () => <DeleteOutlined />,
            default: () => '删除',
          }}
        </Button>
      </div>
    ),
  },
]);

const dataSource = ref([]);

const orgModalProps = ref({ visible: false });

function useOrgModal(row) {
  Object.assign(orgModalProps.value, { row }, { visible: true });
}

function getOrgTreeList() {
  return REQU(`/api/org/treeList`)
  .then(useResp({
    succ: result => {
      dataSource.value = result.data;
    },
  }));
}

function delOrg(ids) {
  return REQU('/api/org/delete', {
    method: 'POST',
    body: toFormData({ ids })
  })
  .then(useResp({
    succ: result => {
      message.success('删除成功');
      getOrgTreeList();
    },
    fail: result => {
      message.error(result.message || '删除失败');
    },
  }));
}

const areaTreeData = ref([]);
provide('areaTreeData', areaTreeData);

function renameEach(xs) {
  return xs.reduce(
    (result, o) => {
      const newO = Object.assign({}, o, { label: o.title, key: o.id, value: o.id });
      o.children?.length && Object.assign(newO, { children: renameEach(o.children)})
      result.push(newO);
      return result;
    },
    []
  );
}

function getAreaTreeList() {
  return REQU(`/api/area/treeList`)
  .then(useResp({
    succ: R.prop('data'),
  }))
}

function main() {
  loading.value = true;
  getOrgTreeList();

  getAreaTreeList()
  .then(renameEach)
  .then(treeList => areaTreeData.value = treeList)
  .finally(() => {
    loading.value = false;
  });
}

main();
</script>

<template>
  <div class="simple">
    <a-button
      v-if="auth"
      type="primary"
      @click="() => useOrgModal()">
      + 新建组织
    </a-button>

    <a-table
      :show-header="0 < dataSource.length"
      :loading="loading"
      :data-source="dataSource"
      :columns="columns"
      :scroll="{ x: 1360 }"
      :pagination="false"
    >
    </a-table>

    <org-modal
      v-if="orgModalProps.visible"
      v-model:visible="orgModalProps.visible"
      :row="orgModalProps.row"
      @ok="() => getOrgTreeList()">
    </org-modal>
  </div>
</template>
